<template>
  <base-layout
    :visibleContent2="true"
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata1"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <CustomerSearch
            @clientForm="clientForm"
            :singleChoice="true"
          />
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">车辆信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="购保人:"
              prop="giveType"
            >
              <el-radio-group v-model="fromdata.giveType">
                <el-radio-button
                  :label="false"
                  :value="0"
                >车主</el-radio-button>
                <el-radio-button
                  :label="true"
                  :value="1"
                >他人</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="购保人姓名:"
              prop="clientName"
            >
              <el-input
                clearable
                v-model="fromdata.client.clientName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系方式:"
              prop="clientPhone"
            >
              <el-input
                clearable
                v-model.number="fromdata.client.phone"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="服务接待:"
              prop="receptionName"
            >
              <el-input
                clearable
                v-model="fromdata.receptionName"
                @focus="employeeFocus('fw')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="车牌号:"
              prop="clientCar.licensePlateNumber"
            >
              <el-input
                clearable
                v-model="fromdata.clientCar.licensePlateNumber"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="车型:"
              prop="carModels"
            >
              <CarModel
                ref="carModel"
                v-model="fromdata.carModels"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="VIN:"
              prop="vin"
            >
              <el-input
                clearable
                v-model="fromdata.clientCar.vin"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel2>
      <el-form
        :inline="true"
        ref="fromdata2"
        :model="fromdata"
        :rules="rules"
        label-width="120px"
        label-position="right"
        class="insuranceForm"
      >
        <el-row>
          <el-col :span="12">保单信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="商业险公司:"
              prop="companyName"
            >
              <el-input
                clearable
                v-model="fromdata.companyName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="销售人:"
              prop="syxSellName"
            >
              <el-input
                clearable
                v-model="fromdata.syxSellName"
                @focus="employeeFocus('syx')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="是否续保:"
              prop="syxContinueInsurance"
            >
              <el-select
                clearable
                v-model="fromdata.syxContinueInsurance"
                placeholder="是否续保"
              >
                <el-option
                  v-for="item in dict['是否']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="商业险投保日期:"
              prop="syxBizInsureDate"
            >
              <el-date-picker
                v-model="fromdata.syxBizInsureDate"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="商业险保单号:"
              prop="syxBizCode"
            >
              <el-input
                clearable
                v-model.number="fromdata.syxBizCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="投保人:"
              prop="syxInsureName"
            >
              <el-input
                clearable
                v-model="fromdata.syxInsureName"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="被保险人:"
              prop="syxBeInsureName"
            >
              <el-input
                clearable
                v-model="fromdata.syxBeInsureName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="预计成本:"
              prop="syxPredictCost"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.syxPredictCost"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="预计收入:"
              prop="syxPredictIncome"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.syxPredictIncome"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="实际成本:"
              prop="syxActualCost"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.syxActualCost"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="实际收入:"
              prop="syxActualIncome"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.syxActualIncome"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="备注:"
              prop="syxRemark"
            >
              <el-input
                type="textarea"
                :rows="6"
                v-model="fromdata.syxRemark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="交强险单号:"
              prop="jqxNo"
            >
              <el-input
                clearable
                v-model.number="fromdata.jqxNo"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="交强险保单号:"
              prop="jqxProtectNo"
            >
              <el-input
                clearable
                v-model.number="fromdata.jqxProtectNo"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="销售人:"
              prop="jqxSellName"
            >
              <el-input
                clearable
                v-model="fromdata.jqxSellName"
                @focus="employeeFocus('jqx')"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="是否续保:"
              prop="jqxContinueInsurance"
            >
              <el-select
                clearable
                v-model="fromdata.jqxContinueInsurance"
                placeholder="是否续保"
              >
                <el-option
                  v-for="item in dict['是否']"
                  :key="item.index"
                  :value="item.value"
                  :label="item.text"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="交强险投保日期:"
              prop="jqxDate"
            >
              <el-date-picker
                v-model="fromdata.jqxDate"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="投保人:"
              prop="jqxInsureName"
            >
              <el-input
                clearable
                v-model="fromdata.jqxInsureName"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="被保险人:"
              prop="jqxBeInsureName"
            >
              <el-input
                clearable
                v-model="fromdata.jqxBeInsureName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="预计成本:"
              prop="jqxPredictCost"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.jqxPredictCost"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="预计收入:"
              prop="jqxPredictIncome"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.jqxPredictIncome"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="实际成本:"
              prop="jqxActualCost"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.jqxActualCost"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="实际收入:"
              prop="jqxActualIncome"
            >
              <el-input
                clearable
                :controls="false"
                :min="0"
                :max="999999999"
                v-model="fromdata.jqxActualIncome"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="备注:"
              prop="jqxRemark"
            >
              <el-input
                type="textarea"
                :rows="6"
                v-model="fromdata.jqxRemark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :span="24"
            align="right"
            justify="center"
          >
            <el-button
              type="success"
              @click="saveUpdate"
            >保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #dialog>
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[fromdata.manageUserName]"
      />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { CustomerSearch, CarModel } from '@/components/index'
import {
  update,
  add,
  getFindById,
} from '@/api/after-sale/workOrderManage/insuranceOrder'
import EmployeeTable from '../../systemManage/store/components/EmployeeTable'
import { getClientById } from '@/api/after-sale/client/client'
import { getDict, getStoreId, getUser, parseTimeToYMDHMS } from '@/utils'
export default {
  components: {
    CustomerSearch,
    EmployeeTable,
    CarModel,
  },
  mixins: [
    baseMixin({
      addData: add,
      updateData: update,
      format (res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data () {
    return {
      show: true,
      fromdata: {
        clientId: '',
        clientCar: {
          licensePlateNumber: '',
          vin: '',
          carModelId: 1,
        }, // 车辆信息
        client: {
          memberLevelDictId: 17, // 客户的等级
        }, // 客户信息
        id: '',
        receptionName: '',
        syxSellName: null,
        jqxSellName: null,
        carModels: [], // 车型数据
      },
      isShow: '', // 判断是销售人还是服务接待
      rules: {
        // receptionName: [{ required: true, message: '请选择服务接待', trigger: 'blur' }],
        'clientCar.licensePlateNumber': [
          { required: true, message: '请输入车牌号', trigger: 'blur' },
        ],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        syxPredictCost: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        syxPredictIncome: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        syxActualCost: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        syxPredictCost: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        jqxPredictCost: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        jqxPredictIncome: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        jqxActualCost: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        jqxActualIncome: [
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '请输入正确额格式,可保留两位小数',
            trigger: 'blur',
          },
        ],
        carModels: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              console.log(value)
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback('请选择车型')
              }
            },
          },
        ],
      },
      dict: [],
    }
  },
  methods: {
    // 客户返回值
    clientForm (value) {
      if (value) {
        this.show = false
        this.fromdata.client = { ...value, cars: null }
        this.fromdata.clientId = this.fromdata.client.id
        // this.fromdata.clientCar = value.cars;
        this.$refs.carModel.show = false
        this.fromdata.clientCar = Array.isArray(value.cars)
          ? value.cars[0]
          : value.cars
        this.fromdata.carModels = [
          this.fromdata.clientCar.carBrandId,
          this.fromdata.clientCar.carSeriesId,
          this.fromdata.clientCar.timeType,
          this.fromdata.clientCar.carModelId,
        ]
        setTimeout(() => {
          this.$refs.carModel.show = true
        }, 100)
      }
    },
    //打开员工选择列表
    employeeFocus (value) {
      this.isShow = value
      this.showEmployeeTable = true
      this.handleDataInsert('销售人员列表')
    },
    //员工选择
    employeListSelectCheck (select) {
      if (this.isShow == 'syx') {
        this.fromdata.syxSellName = select[0].userName
        this.fromdata.syxSellId = select[0].id
      } else if (this.isShow == 'jqx') {
        this.fromdata.jqxSellName = select[0].userName
        this.fromdata.jqxSellId = select[0].id
      } else {
        this.fromdata.receptionName = select[0].userName
        this.fromdata.receptionId = select[0].id
      }

      this.dialogClose()
    },
    saveUpdate () {
      this.$refs['fromdata'].validate((valid) => {
        this.$refs['fromdata2'].validate((valid1) => {
          if (valid && valid1) {
            // 获取门店
            let storeId = getStoreId()
            this.fromdata.storeId = storeId
            this.fromdata.clientCar.carModelId = this.fromdata.carModels[3]
            this.fromdata.clientCar.carSeriesId = this.fromdata.carModels[1]
            this.fromdata.clientCar.timeType = this.fromdata.carModels[2]
            this.fromdata.clientCar.carBrandId = this.fromdata.carModels[0]
            this.fromdata.syxBizInsureDate = parseTimeToYMDHMS(
              this.fromdata.syxBizInsureDate
            )
            this.fromdata.jqxDate = parseTimeToYMDHMS(this.fromdata.jqxDate)
            const { success } = this.handleDataUpdate(this.fromdata)
            this.closeRouter()
          }
        })
      })
    },
    async detail (id) {
      let { data } = await getFindById(id)
      this.fromdata = { ...data }
      this.$refs.carModel.show = false
      this.fromdata.carModels = [
        this.fromdata.clientCar.carBrandId,
        this.fromdata.clientCar.carSeriesId,
        this.fromdata.clientCar.timeType,
        this.fromdata.clientCar.carModelId,
      ]
      setTimeout(() => {
        this.$refs.carModel.show = true
      }, 100)
    },
  },
  mounted () {
    let user = getUser()
    this.fromdata.receptionName = user.name
    this.fromdata.receptionId = user.id
    this.dict = getDict(['是否'])
    let id = this.$route.query.id
    let pickCarId = this.$route.query.pickCarId
    if (id) {
      this.fromdata.id = id
      this.detail(id)
    }
    // 接车单跳过来
    else if (pickCarId) {
      this.fromdata.pickCarId = pickCarId
      if (!id) {
        let data = this.$route.query.data
        this.fromdata = { ...data }
        this.$refs.carModel.show = false
        this.fromdata.carModels = [
          this.fromdata.clientCar.carBrandId,
          this.fromdata.clientCar.carSeriesId,
          this.fromdata.clientCar.timeType,
          this.fromdata.clientCar.carModelId,
        ]
        setTimeout(() => {
          this.$refs.carModel.show = true
        }, 100)
      }
    }
  },
}
</script>
<style lang="scss" scoped></style>
